/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar,
    Switch
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, consoleLog } from '../../utils/utilsToast'

export default class Shezhi extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            value: global.account && global.account.accountData.shoushiopen ? global.account.accountData.shoushiopen : false,
            disabled: false,
            changeTxt:'切换Switch',
            shoushimima: global.account && global.account.accountData.shoushimima ? global.account.accountData.shoushimima : ''
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.loadNetData();
    }

    onBack = () => {
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        
    }

    onPushNavigator = (compent) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            onCallBack:(shoushimima, shoushiopen)=>{
                this.updateState({
                    shoushimima: shoushimima,
                    value: shoushiopen
                })
            }
        })
    }

    cancelShoushi = (value) => {
        this.setState({
            value: value,
        });
        storage.save({
            key: 'accountData',
            data: {
                account: global.account.accountData.account,
                shoushimima: global.account.accountData.shoushimima,
                shoushiopen: false
            }
        });

        global.account = {
            accountData: {
                account: global.account.accountData.account,
                shoushimima: global.account.accountData.shoushimima,
                shoushiopen: false
            }
        };
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {'设置'}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>
                    <View style={GlobalStyles.userlist}>
                        <View style={GlobalStyles.userlistright}>
                            <Text style={GlobalStyles.userlisttext}>设置手势密码</Text>
                            {this.state.value ? 
                                <Switch style={{marginLeft:0}} value={this.state.value} onTintColor='#b88950' tintColor='#ececec' thumbTintColor='#eef0f4' onValueChange={(value)=>{
                                    this.cancelShoushi(value);
                                }}/>
                            :
                                <TouchableOpacity onPress={()=>{this.onPushNavigator('SetGesturePassword');}}>
                                    <Switch style={{marginLeft:0}} value={this.state.value} disabled={true} onTintColor='#b88950' tintColor='#ececec' thumbTintColor='#eef0f4' />
                                </TouchableOpacity>
                                
                            }
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
});
